<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  
  <title>23201012827 魏巍</title>
  <script src="font/iconfont.js"></script>
  <script src="font_d42l8r0ck9c/iconfont.js"></script>
  <style>
    
/* 用户信息 */
    body{
        background-color: #E8E3DF;
        padding: 0;
        margin: 0;
    }
        .box1{
            width: 100%;
            height: 300px;
            position: relative;/* 绝对定位的父元素一定要设置position；relative */
            background-color: #CAE6D7;
            margin: 0;
        }
       /* 用户信息上Wwei */
       .box1-1{
            width: 100%;
            height: 150px;
            padding-top:80px;
            border: 0;
       }
       .box1-1-1{
            text-align: center;
            background-color: #9dd4ab;
            padding: 0px;
            width: 100px;
            height: 30px;
            margin-left: 120px;
            margin-top: 0px;
       } 
       .box1 h2{
            font-size: 22px;
            float: left;
        }
        .box1 h4{
            font-size: 16px;
            float: left;
        }
    /* 用户信息下四列 */  
       .box1-2{
            width: 100%;
            height: 150px;
            padding: 5px 5px 5px 5px;
            border: 0;
            display: flex;
            text-align: center;
       }
       .box1-2-1{
            width: 25%;
            height: 70px;
            text-align: center;
            margin: 0;
            padding: 0;
       }
       .box1-2-2{
            width: 25%;
            height: 70px;
            text-align: center;
            margin: 0;
            padding:0;
       }
       .box1-2-3{
            width: 25%;
            height: 70px;
            text-align: center;
            margin: 0;
            padding:0;
       }
       .box1-2-4{
            width: 25%;
            height: 70px;
            text-align: center;
            margin: 0;
            padding: 0;
       }

 /* 进阶贵宾盒子 盒子靠右 */   
    .box2{
            width: 95%;
            height: 150px;
            border-bottom: 1px solid #c45a5a;
            position: relative;/* 绝对定位的父元素一定要设置position；relative */
            float: right;
            background-color: #AFD6C3;
            margin: 30px 0px 10px 20px;
        }
        .box2 h2{
            font-size: 20px;
            float: left;
            padding-left: 10px;
        }
        .box2 h4{
            font-size: 12px;
            float: left;
            padding-left: 10px;
        }
        .box2 a{
            font-size: 10px;
            float: right;
            color: #333;
            margin-right: 5px;
            text-decoration: none;
        }
 /* <!-- 贵宾特权盒子 周一周二周三周四 --> */
 .box3{
            width: 95%;
            height: 450px;
            border-bottom: 1px solid #c45a5a;
            position: relative;/* 绝对定位的父元素一定要设置position；relative */
            float: right;
            background-color: #fff;
            margin: 10px 0px 10px 20px;
        }
        .box3 h2{
            font-size: 25px;
            float: left;
            padding-left: 10px;
        }
        .box3 a{
            font-size: 12px;
            float: right;
            color: #333;
            margin-right: 8px;
            text-decoration: none;
        }
        .box3-1{
            border: 1px solid#ccc;
            width: 90%;
            height: 80px;
            margin: 40px 10px 10px 40px;
        }
        .box3-1 h4{
            text-align: center;
        }
        
/* 星期一二三四 */
        .tab{
            width: 90%;
            height: 250px;
            margin: 60px 10px 10px 40px;
        }
        .title{  
            width: 100%;
            height: 50px;
            line-height: 10px;
            border-bottom:1px solid rgb(10, 10, 10);
            font-size: 15px;
            display: flex;
        }
        .title span{
            width: 100%;
            text-align:center;
            letter-spacing: 20px;
        }
        .cur{
            border-left: 1px solid #f4d23d;
            border-top: 1px solid #f4d23d;
            border-right: 1px solid #f4d23d;
            background-color: #fff;
            margin-bottom: -1px;
            color: #AFD6C3;
            font-weight: bold;
        }
        .tc{
            height: 200px;
            border: 1px solid #ccc;
            border-top: none;
            font-size: 16px;
            text-align: center;
            line-height: 60px;
            display: none;
        }
        .show{
            display: block;
        }
/* 盒子4 贵宾服务 */
.box4{
            width: 95%;
            height: 300px;
            border-bottom: 1px solid #c45a5a;
            position: relative;/* 绝对定位的父元素一定要设置position；relative */
            float: right;
            background-color: #fff;
            margin: 20px 0px 150px 0px;
        }
        .box4-1 img{
            width: 100%;
            height: 200px;
            padding: 10px 10px 10px 10px;
        }

/* 下导航 */
.icon {
       width: 1em;
       height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

ul{

 list-style: none;

}

a{

 text-decoration: none;

 color: black;

}

.bnav{

 position: fixed;

 left: 0;

 bottom: 0;

 background-color: #fff;

 z-index: 9;

 width: 100%;

}

.body{

 margin-bottom: 50px;

}

.bnav>ul{

 display: flex;

}

.bnav li{

 width: 20%;

 text-align: center;

}

.icon{

 font-size: 36px;

 margin: 5px 0;

}
  </style>

</head>
<body>
<!-- 用户信息 -->
    <div class="box1">
    <div class="box1-1">
        <h2>Wwei ></h2><div class="box1-1-1"><h3 style="color: #fff;">进阶贵宾</h3>
    </div>
    <div class="box1-2">
        <div class="box1-2-1"><h2>28</h2><br><h4>积分商城</h4></div>        
        <div class="box1-2-2"><h2>6</h2><br><h4>喜茶券</h4></div>
        <div class="box1-2-3"><h2>0</h2><br><h4>喜卡</h4></div>
        <div class="box1-2-4"><h2>0.00</h2><br><h4>喜钱袋</h4></div>
    </div>
    </div>

<!-- 进阶贵宾盒子  盒子靠右 -->
   <div class="box2">
        <h2>进/阶/贵/宾</h2><br>
        <a href="#">----------------------->></a> <br>
        <h4>56/199      还需143成长值可升至高阶贵宾,额外解锁3项特权</h4>
   </div>

<!-- 贵宾特权盒子 周一周二周三周四 -->
    <div class="box3">
        <h2>贵宾特权</h2>
        <a href="#">已解锁4项></a>
        <div class="tab">
            <div class="title">
                <span  class="cur">周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
            </div>
            <div class="tc" show>周一领券免配送费<br>每周可领，加阿喜享专属提醒</div>
            <div class="tc">周二下单享免费加料1次<br>升至高级贵宾可解锁</div>
            <div class="tc">周三积分秒杀福利<br>每周一次，积分抢兑新品券</div>
            <div class="tc">周四「一起喝」随机立减<br>每周1次,需3人及以上参与</div>
        </div>
        <div class="box3-1">
            <h4>生日饮茶有礼:单杯8折</h4>
        </div>
    </div>
    <script>
        var tab=document.getElementsByClassName("tab")[0];
         /*    var tt=tab.getElementsByClassName("title");*/
        var tt=tab.querySelector(".title");
        var span=tt.querySelectorAll("span");
        var tc=tab.querySelectorAll(".tc");
        console.log(tab,tt,span,tc);

        for(var i=0;i<span.length;i++){
            span[i].index=i;
             /* index是自定义属性，可以改成其他名字，增加数据结构 */
            /* 功能：点哪里 另一个变 */
            span[i].onmouseover=function(){
                for(var j=0;j<tc.length;j++){
                    tc[j].style.display="none";
                    span[j].classList.remove("cur");

                }
                tc[this.index].style.display="block";
                span[this.index].classList.add("cur");
            }
        }
    </script>
<!-- 盒子4 贵宾服务 -->
<box class="box4">
    <h2>贵宾服务</h2>
    <div class="box4-1">
        <img src="img/会员页.jpg">
    </div>
    
</box>



<!-- 下导航 --> 
  <bav class="bnav" style="background-color: #fff;">
    <ul>
        <li>
            <a href="./index.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./diandan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinpinbanjia"></use>
                </svg>
                <p>点单</p>
            </a>
        </li>
        <li>
            <a href="./baihuo.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan"></use>
                </svg>
                <p>百货</p>
            </a>
        </li>
        <li>
            <a href="./dingdan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <p>订单</p>
            </a>
        </li>
        <li>
            <a href="./huiyuan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chengyuan"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
  </ul>
  </bav>
</body>
</html>